<template>
  <div class="vip-page">
    <div class="nav-row">
      <div class="close-content" @click.stop="goBack">
        <span class="icon iconfont close">&#xe6dc;</span>
      </div>
      <div class="page-title">{{ title }}</div>
    </div>
    <div class="nav-row-sub"></div>
    <div class="content">
      <div class="swiper">
        <img src="/static/img/main/ball.png" class="guang-bc" alt="" />
        <div class="guan">
          <img src="/static/img/main/me_icon.png" alt="" />

          <div class="level-name">Vip1</div>
          <div class="level-top-tip">You are VIP1</div>
        </div>
        <div class="icon-line-content"><div class="icon-line"></div></div>
      </div>
      <div class="swiper-bottom-item">
        <div class="swiper-bottom-content">
          <div class="swiper-bottom-title">Exclusive privileges</div>

          <!----><img
            class="vip-box-cover"
            src="static/img/main/73.png"
            draggable="false"
          />
          <div class="vip-box-name">VIP</div>
          <div class="vip-box-btn">Receive daily benefits</div>
        </div>
      </div>

      <div class="page-bottom">
        <div class="page-bottom-content">
          <div class="page-bottom-title">
            To the next level, you need 500 points
          </div>
          <div class="page-bottom-title-sub">
            Spent $1 = 1Points
          </div>
          <div class="bottom-line">
            <div
             
              class="bottom-line-bc"
              style="width: 0.208333%"
            ></div>
            <div class="bottom-line-num">
              100
              <div class="bottom-line-name">VIP1</div>
            </div>
            <div class="bottom-line-num">
              500
              <div class="bottom-line-name">VIP2</div>
            </div>
            <div class="bottom-line-num">
              5000
              <div class="bottom-line-name">VIP3</div>
            </div>
            <div class="bottom-line-num">
              20000
              <div class="bottom-line-name">VIP4</div>
            </div>
            <div class="bottom-line-num">
              88888
              <div class="bottom-line-name">VIP5</div>
            </div>
            <div class="bottom-line-num">
              52000
              <div class="bottom-line-name">6</div>
            </div>
            <div class="bottom-line-num">
              65000
              <div class="bottom-line-name">7</div>
            </div>
            <div class="bottom-line-num">
              80000
              <div class="bottom-line-name">8</div>
            </div>
            <div class="bottom-line-num">
              97000
              <div class="bottom-line-name">9</div>
            </div>
            <div class="bottom-line-num">
              115000
              <div class="bottom-line-name">10</div>
            </div>
            <div class="bottom-line-num">
              135000
              <div class="bottom-line-name">11</div>
            </div>
            <div class="bottom-line-num">
              158000
              <div class="bottom-line-name">12</div>
            </div>
            <div class="bottom-line-num">
              183000
              <div class="bottom-line-name">13</div>
            </div>
            <div class="bottom-line-num">
              211000
              <div class="bottom-line-name">14</div>
            </div>
            <div class="bottom-line-num">
              242000
              <div class="bottom-line-name">15</div>
            </div>
            <div class="bottom-line-num">
              276000
              <div class="bottom-line-name">16</div>
            </div>
            <div class="bottom-line-num">
              313000
              <div class="bottom-line-name">17</div>
            </div>
            <div class="bottom-line-num">
              354000
              <div class="bottom-line-name">18</div>
            </div>
            <div class="bottom-line-num">
              399000
              <div class="bottom-line-name">19</div>
            </div>
            <div class="bottom-line-num">
              448000
              <div class="bottom-line-name">20</div>
            </div>
            <div class="bottom-line-num">
              502000
              <div class="bottom-line-name">21</div>
            </div>
            <div class="bottom-line-num">
              561000
              <div class="bottom-line-name">22</div>
            </div>
            <div class="bottom-line-num">
              626000
              <div class="bottom-line-name">23</div>
            </div>
            <div class="bottom-line-num">
              697000
              <div class="bottom-line-name">24</div>
            </div>
            <div class="bottom-line-num">
              775000
              <div class="bottom-line-name">25</div>
            </div>
            <div class="bottom-line-num">
              861000
              <div class="bottom-line-name">26</div>
            </div>
            <div class="bottom-line-num">
              957000
              <div class="bottom-line-name">27</div>
            </div>
            <div class="bottom-line-num">
              1062000
              <div class="bottom-line-name">28</div>
            </div>
            <div class="bottom-line-num">
              1179000
              <div class="bottom-line-name">29</div>
            </div>
            <div class="bottom-line-num">
              1308000
              <div class="bottom-line-name">30</div>
            </div>
            <div class="bottom-line-num">
              1451000
              <div class="bottom-line-name">31</div>
            </div>
            <div class="bottom-line-num">
              1610000
              <div class="bottom-line-name">32</div>
            </div>
            <div class="bottom-line-num">
              1787000
              <div class="bottom-line-name">33</div>
            </div>
            <div class="bottom-line-num">
              1982000
              <div class="bottom-line-name">34</div>
            </div>
            <div class="bottom-line-num">
              2199000
              <div class="bottom-line-name">35</div>
            </div>
            <div class="bottom-line-num">
              2440000
              <div class="bottom-line-name">36</div>
            </div>
            <div class="bottom-line-num">
              2707000
              <div class="bottom-line-name">37</div>
            </div>
            <div class="bottom-line-num">
              3002000
              <div class="bottom-line-name">38</div>
            </div>
            <div class="bottom-line-num">
              3329000
              <div class="bottom-line-name">39</div>
            </div>
            <div class="bottom-line-num">
              3691000
              <div class="bottom-line-name">40</div>
            </div>
            <div class="bottom-line-num">
              4090000
              <div class="bottom-line-name">41</div>
            </div>
            <div class="bottom-line-num">
              4532000
              <div class="bottom-line-name">42</div>
            </div>
            <div class="bottom-line-num">
              5019000
              <div class="bottom-line-name">43</div>
            </div>
            <div class="bottom-line-num">
              5556000
              <div class="bottom-line-name">44</div>
            </div>
            <div class="bottom-line-num">
              6148000
              <div class="bottom-line-name">45</div>
            </div>
            <div class="bottom-line-num">
              6800000
              <div class="bottom-line-name">46</div>
            </div>
            <div class="bottom-line-num">
              7518000
              <div class="bottom-line-name">47</div>
            </div>
            <div class="bottom-line-num">
              8308000
              <div class="bottom-line-name">48</div>
            </div>
            <div class="bottom-line-num">
              9178000
              <div class="bottom-line-name">49</div>
            </div>
            <div class="bottom-line-num">
              10136000
              <div class="bottom-line-name">50</div>
            </div>
            <div class="bottom-line-num">
              11189000
              <div class="bottom-line-name">51</div>
            </div>
            <div class="bottom-line-num">
              12347000
              <div class="bottom-line-name">52</div>
            </div>
            <div class="bottom-line-num">
              13622000
              <div class="bottom-line-name">53</div>
            </div>
            <div class="bottom-line-num">
              15025000
              <div class="bottom-line-name">54</div>
            </div>
            <div class="bottom-line-num">
              16568000
              <div class="bottom-line-name">55</div>
            </div>
            <div class="bottom-line-num">
              18267000
              <div class="bottom-line-name">56</div>
            </div>
            <div class="bottom-line-num">
              20138000
              <div class="bottom-line-name">57</div>
            </div>
            <div class="bottom-line-num">
              22199000
              <div class="bottom-line-name">58</div>
            </div>
            <div class="bottom-line-num">
              24470000
              <div class="bottom-line-name">59</div>
            </div>
            <div class="bottom-line-num">
              26973000
              <div class="bottom-line-name">60</div>
            </div>
            <div class="bottom-line-num">
              29734000
              <div class="bottom-line-name">61</div>
            </div>
            <div class="bottom-line-num">
              32779000
              <div class="bottom-line-name">62</div>
            </div>
            <div class="bottom-line-num">
              36140000
              <div class="bottom-line-name">63</div>
            </div>
            <div class="bottom-line-num">
              39852000
              <div class="bottom-line-name">64</div>
            </div>
            <div class="bottom-line-num">
              43953000
              <div class="bottom-line-name">65</div>
            </div>
            <div class="bottom-line-num">
              48485000
              <div class="bottom-line-name">66</div>
            </div>
            <div class="bottom-line-num">
              53497000
              <div class="bottom-line-name">67</div>
            </div>
            <div class="bottom-line-num">
              59040000
              <div class="bottom-line-name">68</div>
            </div>
            <div class="bottom-line-num">
              65175000
              <div class="bottom-line-name">69</div>
            </div>
            <div class="bottom-line-num">
              71966000
              <div class="bottom-line-name">70</div>
            </div>
            <div class="bottom-line-num">
              79486000
              <div class="bottom-line-name">71</div>
            </div>
            <div class="bottom-line-num">
              87818000
              <div class="bottom-line-name">72</div>
            </div>
            <div class="bottom-line-num">
              97050000
              <div class="bottom-line-name">73</div>
            </div>
            <div class="bottom-line-num">
              107282000
              <div class="bottom-line-name">74</div>
            </div>
            <div class="bottom-line-num">
              118627000
              <div class="bottom-line-name">75</div>
            </div>
            <div class="bottom-line-num">
              131208000
              <div class="bottom-line-name">76</div>
            </div>
            <div class="bottom-line-num">
              145160000
              <div class="bottom-line-name">77</div>
            </div>
            <div class="bottom-line-num">
              160637000
              <div class="bottom-line-name">78</div>
            </div>
            <div class="bottom-line-num">
              177807000
              <div class="bottom-line-name">79</div>
            </div>
            <div class="bottom-line-num">
              196856000
              <div class="bottom-line-name">80</div>
            </div>
            <div class="bottom-line-num">
              217991000
              <div class="bottom-line-name">81</div>
            </div>
            <div class="bottom-line-num">
              241440000
              <div class="bottom-line-name">82</div>
            </div>
            <div class="bottom-line-num">
              267457000
              <div class="bottom-line-name">83</div>
            </div>
            <div class="bottom-line-num">
              296320000
              <div class="bottom-line-name">84</div>
            </div>
            <div class="bottom-line-num">
              328338000
              <div class="bottom-line-name">85</div>
            </div>
            <div class="bottom-line-num">
              363852000
              <div class="bottom-line-name">86</div>
            </div>
            <div class="bottom-line-num">
              403239000
              <div class="bottom-line-name">87</div>
            </div>
            <div class="bottom-line-num">
              446912000
              <div class="bottom-line-name">88</div>
            </div>
            <div class="bottom-line-num">
              495328000
              <div class="bottom-line-name">89</div>
            </div>
            <div class="bottom-line-num">
              548990000
              <div class="bottom-line-name">90</div>
            </div>
            <div class="bottom-line-num">
              608451000
              <div class="bottom-line-name">91</div>
            </div>
            <div class="bottom-line-num">
              674319000
              <div class="bottom-line-name">92</div>
            </div>
            <div class="bottom-line-num">
              747262000
              <div class="bottom-line-name">93</div>
            </div>
            <div class="bottom-line-num">
              828015000
              <div class="bottom-line-name">94</div>
            </div>
            <div class="bottom-line-num">
              917380000
              <div class="bottom-line-name">95</div>
            </div>
            <div class="bottom-line-num">
              1016242000
              <div class="bottom-line-name">96</div>
            </div>
            <div class="bottom-line-num">
              1125565000
              <div class="bottom-line-name">97</div>
            </div>
            <div class="bottom-line-num">
              1246408000
              <div class="bottom-line-name">98</div>
            </div>
            <div class="bottom-line-num">
              1379928000
              <div class="bottom-line-name">99</div>
            </div>
            <div class="bottom-line-num">
              1527388000
              <div class="bottom-line-name">100</div>
            </div>
            <div class="bottom-line-num">
              1690170000
              <div class="bottom-line-name">101</div>
            </div>
            <div class="bottom-line-num">
              1869782000
              <div class="bottom-line-name">102</div>
            </div>
            <div class="bottom-line-num">
              2067866000
              <div class="bottom-line-name">103</div>
            </div>
            <div class="bottom-line-num">
              2286214000
              <div class="bottom-line-name">104</div>
            </div>
            <div class="bottom-line-num">
              2526776000
              <div class="bottom-line-name">105</div>
            </div>
            <div class="bottom-line-num">
              2791673000
              <div class="bottom-line-name">106</div>
            </div>
            <div class="bottom-line-num">
              3083215000
              <div class="bottom-line-name">107</div>
            </div>
            <div class="bottom-line-num">
              3403906000
              <div class="bottom-line-name">108</div>
            </div>
            <div class="bottom-line-num">
              3756470000
              <div class="bottom-line-name">109</div>
            </div>
            <div class="bottom-line-num">
              4143860000
              <div class="bottom-line-name">110</div>
            </div>
            <div class="bottom-line-num">
              4569276000
              <div class="bottom-line-name">111</div>
            </div>
            <div class="bottom-line-num">
              5036187000
              <div class="bottom-line-name">112</div>
            </div>
            <div class="bottom-line-num">
              5548350000
              <div class="bottom-line-name">113</div>
            </div>
            <div class="bottom-line-num">
              6109825000
              <div class="bottom-line-name">114</div>
            </div>
            <div class="bottom-line-num">
              6725006000
              <div class="bottom-line-name">115</div>
            </div>
            <div class="bottom-line-num">
              7398636000
              <div class="bottom-line-name">116</div>
            </div>
            <div class="bottom-line-num">
              8135840000
              <div class="bottom-line-name">117</div>
            </div>
            <div class="bottom-line-num">
              8942144000
              <div class="bottom-line-name">118</div>
            </div>
            <div class="bottom-line-num">
              9823508000
              <div class="bottom-line-name">119</div>
            </div>
            <div class="bottom-line-num">
              10786353000
              <div class="bottom-line-name">120</div>
            </div>
          </div>
        </div>
        <div class="buy-btn">UNBOX</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "setting",
  data() {
    return {};
  },
  computed: {
    title() {
      return "VIP Privileges";
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@keyframes but_line-data-v-23adffce {
  0% {
    -webkit-transform: translate(-55px) rotate(45deg);
    transform: translate(-55px) rotate(45deg);
  }
  100% {
    -webkit-transform: translate(165px) rotate(45deg);
    transform: translate(165px) rotate(45deg);
  }
}

.vip-page {
  background-image: url(/static/img/main/bc.svg);

  width: 100%;
  height: 100%;
  background-size: 110% auto;
  box-sizing: border-box;
  color: var(--text-color);
  .nav-row {
    position: fixed;
    height: 44px;
    // padding: 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-top: calc(0px);
    z-index: 99;
    background-color: var(--main-bc-color);

    .close-content {
      width: 30px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      padding: 0 10px;
      .close {
        font-size: 22px;
        font-weight: 500;
      }
    }
    .page-title {
      text-align: center;
      font-size: 16px;
      margin: auto;
    }
  }
  .nav-row-sub {
    height: 45px;
    width: 100%;
    padding-top: calc(0px);
  }
  .content {
    // -webkit-mask-image: linear-gradient(
    //   180deg,
    //   transparent -55px,
    //   #000 calc(0px + 209px),
    //   transparent
    // );
    // mask-image: linear-gradient(
    //   180deg,
    //   transparent -55px,
    //   #000 calc(0px + 209px),
    //   transparent
    // );
    .swiper {
      height: 330px;
      position: relative;
      .guan {
        position: absolute;
        top: 105px;
        transform: translateX(-50%);
        left: 50%;
        text-align: center;
        img {
          width: 150px;
        }
      }
      .icon-line-content {
        position: absolute;
        top: 105px;
        transform: translateX(-50%);
        left: 50%;
        text-align: center;
        height: 150px;
        width: 150px;
        overflow: hidden;
        -webkit-mask-image: radial-gradient(#fff, hsla(0, 0%, 100%, 0) 50%);
        mask-image: radial-gradient(#fff, hsla(0, 0%, 100%, 0) 50%);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        border-radius: 100%;
        .icon-line {
          position: absolute;
          width: 40px;
          height: 150px;
          left: 0;
          z-index: 2;
          background: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0),
            hsla(0, 0%, 100%, 0.8),
            hsla(0, 0%, 100%, 0)
          );
          -webkit-animation: but_line-data-v-23adffce 2s linear infinite;
          animation: but_line-data-v-23adffce 2s linear infinite;
        }
      }

      .level-name {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);

        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #fff;
        text-shadow: 2px 2px 0 #333;
        background-image: linear-gradient(
          to right,
          rgba(255, 0, 0, 0),
          rgba(255, 255, 255, 1),
          rgba(255, 0, 0, 0)
        );
        width: 121px;

        margin: 0 auto;
      }
      .level-top-tip {
        font-size: 12px;
        color: #fff;
        position: absolute;
        width: 110px;
        text-align: center;
        left: 50%;
        top: 189px;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
      }
    }
    .guang-bc {
      position: absolute;
      left: 50%;
      top: 29px;
      width: 300px;
      height: 300px;
      -webkit-transform: translate(-50%);
      transform: translate(-50%);
      -webkit-mask-image: radial-gradient(
        #000 50%,
        transparent 80%,
        transparent
      );
      mask-image: radial-gradient(#000 50%, transparent 80%, transparent);
    }

    .swiper-bottom-item {
      width: 100%;
      height: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      .swiper-bottom-content {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        .swiper-bottom-title {
          color: #fff;
          font-size: 14px;
          text-align: center;
          margin-bottom: 10px;
        }
        .vip-box-cover {
          width: 110px;
          height: 110px;
          margin-bottom: 10px;
          display: block;
          margin-left: auto;
          margin-right: auto;
        }
        .vip-box-name {
          width: 100%;
          text-align: center;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 10px;
          color: #fff;
        }
        .vip-box-btn {
          width: 100%;
          height: 40px;
          background-color: hsla(0, 0%, 100%, 0.3);
          border-radius: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 14px;
          font-weight: 700;
        }
      }
    }

    .page-bottom {
      width: 100%;
      height: 80px;
      background-color: #4e4e4e;
      position: fixed;
      bottom: 0;
      left: 0;
      padding-bottom: 0;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .page-bottom-content {
        flex: 1;
        padding: 0 15px;
        box-sizing: border-box;
        color: #fff;
        height: 100%;
        .page-bottom-title {
          margin-top: 5px;
          font-size: 12px;
          color: #fff;
        }
      }
      .page-bottom-title-sub {
        font-size: 12px;
        color: #999;
      }
      .bottom-line {
        width: 100%;
        height: 12px;
        border-radius: 12px;
        background-color: #858585;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 5px 0 25px 0;
        box-sizing: border-box;
        position: relative;
        .bottom-line-bc {
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          border-radius: 12px;
          background-color: #ccc;
        }
        .bottom-line-num {
          color: #4d3527;
          flex: 1;
          text-align: center;
          font-weight: 500;
          font-size: 10px;
          position: relative;
          z-index: 9;
          .bottom-line-name {
            position: absolute;
            width: 40px;
            text-align: center;
            left: 50%;
            -webkit-transform: translate(-50%, 15px);
            transform: translate(-50%, 15px);
            bottom: 0;
            color: #999;
            font-size: 10px;
          }
        }
        .buy-btn {
          width: 80px;
          height: 30px;
          border-radius: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #5d5bff;
          color: #fff;
          font-size: 14px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>